<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--针对IE的兼容性问题-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--针对响应式布局之后，针对不同的布局大小自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>员工管理系统</title>
    <!--导入bootstrap的主样式-->
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/component/bootstrap-3.3.7-dist/css/bootstrap.min.css"
          type="text/css">
    <link rel="shortcut icon" href="#"/>
    <style type="text/css">
        a {
            text-decoration: none;
            outline: none;
        }

        a:hover {
            text-decoration: none;
            color: inherit;
        }

        a:link {
            text-decoration: none;
            color: inherit;
        }

        .sys {
            width: 65%;
            margin: 50px auto 0px;
        }

        table {
            width: 100%;
            border: 1px solid lightpink;
            text-align: center;
        }

        table th {
            text-align: center;
        }

        table span {
            color: #cc9eff;
        }

        table a {
            color: #cc9eff;
        }

        table span:hover {
            cursor: pointer;
        }

        table tr th {
            font-weight: unset;
        }

        .control {
            display: none;
        }

        /*.control p span {*/
        /*    display: inline-block;*/
        /*    !*width: 125px;*!*/
        /*}*/

        .control p input {
            padding: 6px 10px;
        }

        .control p input:nth-child(4) {
            width: 115px;
        }

        .control p input:nth-child(1), .control p input:nth-child(2) {
            width: 130px;
        }

    </style>
</head>
<body>
<div class="sys">
    <form action="#" class="search text-center">
        <p>Welcome,${LOGIN_USER_KEY}!</p>
        <p class="form-inline">
            <%--<label class="control-label">NAME:</label>--%>
            <input type="text" name="name" class="form-control" placeholder="Name">
            <%--<label class="control-label">GENDER:</label>--%>
            <label class="radio-inline col-md-offset-1">
                <input type="radio" name="gender" class="gender">男
            </label>
            <label class="radio-inline">
                <input type="radio" name="gender" class="gender" checked>女
            </label>
            <button type="button" id="search" class="btn btn-default col-md-offset-3">search</button>
        </p>
    </form>

    <table class="tab table table-bordered table-hover">
        <tr class="info">
            <th>ID号</th>
            <th>NAME</th>
            <th>BIRTHDAY</th>
            <th>GENDER</th>
            <th>PHONE</th>
            <th>
                操作:
                <span class="add">添加</span>
            </th>
        </tr>
        <%--<tr>--%>
        <%--    <td>10000</td>--%>
        <%--    <td>zs0</td>--%>
        <%--    <td>10000</td>--%>
        <%--    <td>1</td>--%>
        <%--    <td>10000</td>--%>
        <%--    <td>--%>
        <%--        <span class="sp_delete" href="${pageContext.request.contextPath}/employee/delete">删除</span>--%>
        <%--        <span class="sp_modify">修改</span>--%>
        <%--    </td>--%>
        <%--</tr>--%>
        <c:forEach items="${ALL_Employee}" var="employee">
            <tr>
                <td>${employee.id}</td>
                <td>${employee.name}</td>
                <td>${employee.birthday}</td>
                <td>${employee.gender}</td>
                <td>${employee.phone}</td>
                <td>
                    <a class="sp_delete"
                       href="${pageContext.request.contextPath}/employee/delete?id=${employee.id}">删除
                    </a>
                    <span class="sp_modify">修改</span>
                </td>
            </tr>
        </c:forEach>
    </table>
    <form action="${pageContext.request.contextPath}/employee/add" class="control" method="post" id="control">
        <p class="form-inline">
            <input type="text" name="default-id" class="sr-only">
            <input type="text" name="id" placeholder="ID" class="form-control">
            <input type="text" name="name" placeholder="NAME" class="form-control">
            <input type="date" name="birthday" placeholder="BIRTHDAY" class="form-control">
            <input type="number" name="gender" max="1" min="0" placeholder="GENDER" class="form-control">
            <input type="text" name="phone" placeholder="PHONE" class="form-control">
            <button type="submit" id="btn_add" class="btn btn-default">add</button>
            <button type="button" id="btn_return" class="btn-default btn">return</button>
        </p>
    </form>
</div>
<!--导入js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath}/component/jQuery/jquery-3.0.0.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/component/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/employeeSystem.js"></script>
<script type="text/javascript">
    new employeeSystem(".tab");
</script>
</body>
</html>